<template>
	<page ref='page' top='100rpx'>
		<!-- wwl 设计案例详情 -->
		<view class="page" >
			<view class="tabber_box">
				<view class="" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="tabber_box_flex">
				<view class="" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="top_title">
			</view>
			<view class="top_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
				<view class="left" @click="onBack()">
					<n-icon name="back" size="38" color="#000"></n-icon>
				</view>
				<image :src="info.shopavatar" mode="scaleToFill" @click="onShop()"></image>
				<view class="title" @click="onShop()">
					{{info.shopname}}
				</view>
			</view>
			<view class="info_box">
				<view class="info_top">
					<image :src="info.cover" mode="scaleToFill"></image>
					<view class="info_text">
						<view class="">
							{{info.title}}
						</view>
						<view class="label">
							<text class="textL">{{info.address_name}}</text>
							<text class="textL">{{info.type}}</text>
							<text class="textL">{{info.centiare ?  Number(info.centiare)+'m' : 0+'m' }}</text>
							<text class="square">2</text>
						</view>
					</view>
					<view class="info_top_bottom">
					</view>
				</view>
				<view class="list_box">
					<view class="row" v-for="(row,i) in info.design_info" :key='i'>
						<view class="title1">
							{{row.title_one}}
						</view>
						<view class="title2">
							{{row.title_two}}
						</view>
						<swiper class="banner" circular autoplay interval="3000" duration="1000">
							<swiper-item v-for="(img,index) in row.carousel" :key='index'>
								<image :src="img" mode="scaleToFill" class="image"></image>
							</swiper-item>
						</swiper>
						<view class="content">
							{{row.content}}
						</view>
					</view>
				</view>
				<view class="role_box" @click="onShop()">
					<view class="left">
						<image :src="info.shopavatar" mode="scaleToFill"></image>
						<view>{{info.shopname}}</view>
					</view>
					<view class="right" @click.stop="onChatRoom()">
						找他设计
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box" v-if="info.id">
			<view :class="status == 1 ? 'left' :'left2'">
				<view class="row" @click="onOperation(1,info.is_like == 1 )">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/YDvHTYdV40Mr0Mes4DJXg1jvsLNjQROx8BQKkLFq.png" mode="scaleToFill" v-if="info.is_like == 1">
					</image>
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/lSK7pXE39wJeV96F13U88TjgX1x27kMYFehTvmxP.png" mode="scaleToFill" v-else></image>
					<text>{{info.like}}</text>
				</view>
				<view class="row" @click="onOperation(2,info.is_collect == 1 )">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/GKE0onhRAublBcECEMLlS2nmNNbLUClCpsTf1UVq.png" mode="scaleToFill" v-if="info.is_collect == 1">
					</image>
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/UqCVIBO5Y4YcmClAqexlQz6jFzsfp7sT3HQv0Jm9.png" mode="scaleToFill" v-else></image>
					<text>{{info.collect}}</text>
				</view>
				<!-- #ifdef MP-WEIXIN  -->
				<button class="row row2" open-type="share">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/y3es35peNBbC1bpkQQTfqsMPEjsLdlHTbJW14Nr9.png" mode="scaleToFill"></image>
					<text class="right_row_text">{{info.transmit}}</text>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN  -->
				<view class="row" @click="onOperation(3)">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/y3es35peNBbC1bpkQQTfqsMPEjsLdlHTbJW14Nr9.png" mode="scaleToFill"></image>
					<text>{{info.transmit}}</text>
				</view>
				<!-- #endif -->
			</view>
			<view class="right" v-if='status  == 1'>
				查看施工现场
			</view>
		</view>
	</page>
</template>

<script>
	import {setLikeCollection,setAddLook,setAddShare} from "@/utils/postRequest.js"
	import {
		getDesignInfo
	} from "../static/api.js"
	export default {
		data() {
			return {
				status: 2,
				id: null,
				info: {
					users: {},
					list: []
				},
				loading1: false
			}
		},
		async onShareAppMessage(res) {
			await  setAddShare({id:this.id,type:6,isErr:false})
			 this.info.transmit ++ 
			return {
				title: this.info.title,
				imageUrl: this.info.cover,
				path: `/pagesHome/designCase/details?id=${this.id}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
			};
		},
		async onShareTimeline(ops) {
			await  setAddShare({id:this.id,type:6,isErr:false})
			return {
				title: this.info.title,
				imageUrl: this.info.cover,
				path: `/pagesHome/designCase/details?id=${this.id}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
			};
		},
		methods: {
			async onOperation(type, flag) {
				if(!this.$store.getters.userInfo){
					return this.$global.getUserInfo()
				}
				if (type != 3) {
					if (this.loading1) return
					this.loading1 = true
					try {
						var res = await setLikeCollection({
							flag: flag,
							status: type,
							id: this.info.id,
							type: 6
						})
						this.loading1 = false
						if (type == 1) {
							if (flag) {
								this.info.is_like = 2
								this.info.like = Number(this.info.like) - 1
							} else {
								this.info.is_like = 1
								this.info.like = Number(this.info.like) + 1
							}
						} else {
							if (flag) {
								this.info.is_collect = 2
								this.info.collect = Number(this.info.collect) -1
							} else {
								this.info.is_collect = 1
								this.info.collect = Number(this.info.collect) + 1
							}
						}

					} catch {
						uni.showToast({title:'操作失败',icon:'none'})
						this.loading1 = false
					}
				} else {
					this.onShare()
				}

			},
			onShop(){
				console.log(this.info.shopping_id,'设计师啊');
				if(this.info.juese == 1){
					uni.navigateTo({
						url:'/pagesCommodity/shopDetailsDefault?type=shopDetailsBuilding&id=' + this.info.shopping_id+ '&duihuan=0&offer='
					})
				}
				if(this.info.juese == 2){
					uni.navigateTo({
						url:'/pagesCommodity/shopDetailsDefault?type=findCraftsman&id=' + this.info.shopping_id+ '&duihuan=0&offer='
					})
				}
				if(this.info.juese == 3){
					uni.navigateTo({
						url:'/pagesCommodity/shopDetailsDefault?type=findDesign&id=' + this.info.shopping_id+ '&duihuan=0&offer='
					})
				}
				
			},
			onShare(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 5,
					miniProgram:{
						id:this.$global.originalId,
						path:`/pagesHome/designCase/details?id=${this.id}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
						type:this.$global.environment == 'development' ? 2 : 0,
						webUrl:"https://www.baidu.com"
					},
				    title: this.info.title,
				    imageUrl:this.$global.shareImg,
				    success: (res)=> {
				       this.info.transmit ++ 
					   setAddShare({id:this.id,type:6,isErr:false})
				    },
				    fail: function (err) {
						// console.log(JSON.stringify(err))
				    }
				});
			},
			 onChatRoom(id){
				if(!this.$store.getters.userInfo){
					return this.$global.getUserInfo()
				}
				if(this.$store.getters.userInfo.accid == this.info.users.id) return uni.showToast({title:'不能与自己聊天哦～',icon:'none'}) 
				this.$store.commit('set_chat_to',{
					id: this.info.users.id,
					name:this.info.users.name,
					avatar :this.info.users.avatar
				})
				uni.navigateTo({
					url:'/pagesChat/chatRoom?char_type=1&shopping_id='+id+'&chat_toname='+this.info.users.name
				})
			},
			onBack() {
				let routes = getCurrentPages()
				if (routes.length == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			async getInfo() {
				uni.showLoading()
				try {
					var res = await getDesignInfo({
						id: this.id
					})
					this.info = res;
					console.log(this.info,'设计师');
					console.log(this.info.shopping_id,'设计师啊店铺');
					uni.hideLoading()
					setAddLook({id:this.id,type:6,isErr:false})
					this.$global.$editUploadBack(1,`designCaseLook?id=${this.id}`)

				} catch {
					uni.hideLoading()
				}
			}
		},
		onLoad(params) {
			this.id = params.id
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		padding-bottom: 200rpx;
	}

	.tabber_box {
		width: 100%;
		background-color: #fff;
	}

	.tabber_box_flex {
		width: 750rpx;
		position: fixed;
		z-index: 9;
		top: 0;
		background-color: #fff;
	}

	.top_title {
		height: 108rpx;
		background-color: #fff;
	}

	.top_title_flex {
		position: fixed;
		z-index: 9;
		top: 0;
		background-color: #fff;
		height: 108rpx;
		line-height: 88rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #000;
		padding: 0 30rpx 20rpx;
		width: 100%;
		box-sizing: border-box;

		.left {
			margin-right: 30rpx;
		}

		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.title {
			max-width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.info_top {
		width: 750rpx;
		height: 600rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.info_top_bottom {
			position: absolute;
			bottom: 0;
			background-color: #fff;
			height: 72rpx;
			width: 750rpx;
			border-radius: 56rpx 56rpx 0 0;
		}

		.info_text {
			position: absolute;
			bottom: 0;
			padding: 32rpx 42rpx 94rpx;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.3);
			width: 100%;
			color: #fff;

			.view:nth-child(1) {
				font-size: 36rpx;
				line-height: 50rpx;
				font-weight: 700;
				margin-bottom: 6rpx;
			}

			.label {
				font-size: 28rpx;
				line-height: 40rpx;

				.textL {
					margin-left: 20rpx;
				}

				.square {
					font-size: 30rpx;
					display: inline-block;
					transform: scale(0.7) translateY(-12%);
				}
			}

		}
	}

	.list_box {
		padding-bottom: 50rpx;

		.row {
			padding: 120rpx 36rpx 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;

			&:nth-child(1) {
				padding-top: 38rpx;
			}
		}

		.title1,
		.title2 {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #292929;
			font-weight: 700;
		}

		.title2 {
			margin-top: 8rpx;
		}

		.banner {
			margin-top: 44rpx;
			width: 100%;
			height: 410rpx;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 410rpx;
				border-radius: 20rpx;
			}
		}

		.content {
			margin-top: 40rpx;
			font-size: 28rpx;
			line-height: 52rpx;
			color: #292929;
		}
	}

	.bottom_box {
		position: fixed;
		z-index: 9;
		bottom: 0;
		display: flex;
		background-color: #fff;
		padding: 30rpx 36rpx 30rpx;
		box-sizing: border-box;
		width: 100%;

		.left {
			width: calc(100% - 416rpx);
			box-sizing: border-box;
			padding-right: 20rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.row {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-content: center;
			align-items: center;

			image {
				width: 46rpx;
				height: 46rpx;
				margin-bottom: 6rpx;
			}

			text {
				font-size: 20rpx;
				color: #ADADAD;
				line-height: 28rpx;
			}
		}
		.row2{
			background-color: #fff;
		}

		.left2 {
			width: 100%;
			padding-right: 20rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
		}

		.right {
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			width: 416rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: $theme;
			border-radius: 36px;
		}
	}

	.role_box {
		display: flex;
		width: 750rpx;
		padding: 0 36rpx 30rpx 44rpx;
		box-sizing: border-box;

		.left {
			width: calc(100% - 156rpx);
			display: flex;
			justify-content: space-between;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			view {
				margin-top: 15rpx;
				width: calc(100% - 100rpx);
				font-size: 36rpx;
				color: #121212;
				line-height: 50rpx;
				font-weight: 700;
			}
		}

		.right {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: $theme;
			width: 136rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #ffffff;
			border: 2rpx solid $theme;
			border-radius: 26rpx;
			text-align: center;
		}
	}
	button[loading]::before {
		align-self: center
	}
	
	button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-item: center;
		padding: 0;
	}
	
	button::after {
		border: none;
	}
</style>
